<template>
  <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" title="名额" width="50%">
    <div>
      <p>
        你可以为每个选项设定名额。每次有人选择，就会占用1个名额，直至名额用完。同时你也可以自定义名额用完之后的文案提示。
      </p>
      <div class="el-form el-form--label-top" style="margin-top: 20px">
        <div class="el-form-item">
          <div class="el-form-item__label" style="display: flex">
            <div style="flex: 1"><b>选项设置</b></div>
            <div>
              <el-popover v-model="quotaSettingVisible" trigger="click" width="300">
                <div>
                  <p>名额设置</p>
                  <div style="margin: 10px 0">
                    <el-input-number v-model="quota" :min="0" class="w100" placeholder="请输入"></el-input-number>
                  </div>
                  <div>
                    <div class="el-popconfirm__action">
                      <el-button size="mini" type="primary" @click="onQuotaSetting()">确定</el-button>
                      <el-button size="mini" @click="quotaSettingVisible = false">取消</el-button>
                    </div>
                  </div>
                </div>
                <el-button type="text" slot="reference">批量设置</el-button>
              </el-popover>
            </div>
          </div>
          <div class="el-form-item__content">
            <el-table border :data="copyActiveData.config.options">
              <el-table-column label="选项" property="label"></el-table-column>
              <el-table-column property="quotaSetting" label="名额设置">
                <template slot-scope="scope">
                  <el-input-number
                    :min="0"
                    class="w100"
                    v-model="scope.row.quotaSetting"
                    placeholder="请输入"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="剩余名额" property="quotaSetting">
                <template slot-scope="scope">
                  <span v-if="scope.row.quotaSetting">
                    {{ getSurplusQuota(scope.row) }}
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="el-form-item">
          <div class="el-form-item__label"><b>剩余名额为0时，显示文案</b>(仅限20个字符)</div>
          <div class="el-form-item__content">
            <el-input v-model="copyActiveData.config.quotaBlankWarning"></el-input>
          </div>
        </div>
        <div class="el-form-item">
          <div class="el-form-item__label">
            <b>选项名额重置</b>
            <el-tooltip
              class="item"
              content="勾选后，名额可按「天」「周」自动重置。每天重置时间为0点，每周重置时间为每周日晚上0点。
              系统将在00:00-00:30 进行名额重置，期间表单不可填写。重置期间请勿修改数据详情。"
              effect="dark"
              placement="top-start"
            >
              <i class="el-icon-question" />
            </el-tooltip>
          </div>
          <div class="el-form-item__content">
            <el-radio-group v-model="copyActiveData.config.quotaCycleRule">
              <el-radio label="fixed">不重置</el-radio>
              <el-radio label="per_day">按天</el-radio>
              <el-radio label="per_week">按周</el-radio>
            </el-radio-group>
            <div>
              <!--              <el-checkbox v-model="copyActiveData.config.quotaRecoverable"-->
              <!--              >删除数据后，选项名额自动恢复-->
              <!--              </el-checkbox-->
              <!--              >-->
            </div>
            <div>
              <el-checkbox v-model="copyActiveData.config.hideChoiceWhenQuotaEmpty"
                >不向填表者展示选项名额剩余数字
              </el-checkbox>
            </div>
            <div>
              <el-checkbox v-model="copyActiveData.config.hideQuota">选项名额为空时隐藏选项</el-checkbox>
            </div>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveQuotaSetting">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import OptionQuotaMixin from '../../FormItem/mixins/OptionQuotaMixin'

export default {
  name: 'OptionQuota',
  mixins: [OptionQuotaMixin],
  props: {
    activeData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      copyActiveData: JSON.parse(JSON.stringify(this.activeData)),
      dialogVisible: false,
      quotaSettingVisible: false,
      quota: '',
      item: this.activeData
    }
  },
  watch: {
    activeData: {
      handler(val) {
        this.copyActiveData = JSON.parse(JSON.stringify(val))
      },
      deep: true
    }
  },
  methods: {
    openQuotaSetting() {
      this.dialogVisible = true
      this.getOptionUsedQuota()
    },
    onQuotaSetting() {
      const { quota } = this
      this.activeData.config.options.map((e) => {
        e.quotaSetting = quota
        return e
      })
      this.quotaSettingVisible = false
    },
    saveQuotaSetting() {
      this.activeData.config.quotaCycleRule = this.copyActiveData.config.quotaCycleRule
      this.activeData.config.hideChoiceWhenQuotaEmpty = this.copyActiveData.config.hideChoiceWhenQuotaEmpty
      this.activeData.config.hideQuota = this.copyActiveData.config.hideQuota
      this.activeData.config.quotaBlankWarning = this.copyActiveData.config.quotaBlankWarning
      this.activeData.config.quotaRecoverable = this.copyActiveData.config.quotaRecoverable
      this.activeData.config.options = this.copyActiveData.config.options
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped></style>
